<template>
  <div>
    <div class="option">
      <el-button @click="info.isShow = true" type="primary" round plain
        >新增</el-button
      >
    </div>
    <!-- 表格 -->
    <el-table :data="goodsList">
      <el-table-column
        fixed="left"
        prop="id"
        label="ID"
        min-width="60"
      ></el-table-column>
      <el-table-column
        prop="firstcatename"
        label="一级分类"
        min-width="180"
      ></el-table-column>
      <el-table-column
        prop="secondcatename"
        label="二级分类"
        min-width="180"
      ></el-table-column>
      <el-table-column
        prop="goodsname"
        label="商品名称"
        min-width="180"
      ></el-table-column>
      <el-table-column prop="img" label="商品图片" min-width="180">
        <template v-slot="props">
          <img :src="$baseUrl + props.row.img" alt="" style="height: 80px" />
        </template>
      </el-table-column>
      <el-table-column
        prop="price"
        label="商品价格"
        min-width="180"
      ></el-table-column>
      <el-table-column
        prop="market_price"
        label="市场价格"
        min-width="180"
      ></el-table-column>
      <el-table-column prop="isnew" label="是否新品" min-width="180">
        <template v-slot="props">
          <el-tooltip
            :content="props.row.isnew === 1 ? '是' : '否'"
            placement="top"
          >
            <el-switch
              v-model="props.row.isnew"
              :active-value="1"
              :inactive-value="0"
              @change="attrChange(props.row)"
            >
            </el-switch>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="ishot" label="是否热卖" min-width="180">
        <template v-slot="props">
          <el-tooltip
            :content="props.row.ishot === 1 ? '是' : '否'"
            placement="top"
          >
            <el-switch
              v-model="props.row.ishot"
              :active-value="1"
              :inactive-value="0"
              @change="attrChange(props.row)"
            >
            </el-switch>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="商品状态" min-width="180">
        <template v-slot="props">
          <el-button
            type="success"
            size="mini"
            round
            plain
            v-if="props.row.status === 1"
            >正常</el-button
          >
          <el-button type="danger" size="mini" round plain v-else
            >禁用</el-button
          >
        </template>
      </el-table-column>

      <el-table-column label="操作" min-width="160" fixed="right">
       <template v-slot="props">
          <el-button @click="edit(props.row)" type="primary" size="mini" plain round>编辑</el-button>
          <el-button @click="del(props.row.id)" type="danger" size="mini" plain round>删除</el-button>
       </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @current-change="pageChange"
      @size-change="sizeChange"
      background
      layout="prev,pager,next,sizes"
      :total="goodsTotal"
      :page-size="5"
      :page-sizes="[5, 10, 15, 20]"
    ></el-pagination>
    <!-- 调用对话框组件 -->
    <Dialog ref="dialog" :info="info" @goodsUpdate="goodsUpdateHandle" />
  </div>
</template>

<script>
// 导入对话框组件
import Dialog from "./Dialog";
// 导入vuex辅助函数
import { mapState, mapActions } from "vuex";
export default {
  components: { Dialog },
  data() {
    return {
      info: {
        isShow: false,
      },
      // 页码
      page: 1,
      // 每页显示数据条数
      size: 5,
    };
  },
  computed: {
    ...mapState("goods", ["goodsList", "goodsTotal"]),
  },
  methods: {
    ...mapActions("goods", ["getGoodsListAction", "getGoodsTotalAction"]),
    // 删除
    del(id){
      this.$myConfirm(()=>{
        this.$axios.post('/goodsdelete',{id}).then(res=>{
          if(res.code===200){
            this.$message.success(res.msg);
            // 更新数据
            this.goodsUpdateHandle();
          }else{
            this.$message.error(res.msg);
          }
        })
      });
    },
    // 编辑按钮点击事件处理函数
    edit(row){
      // 1-将待编辑的商品信息传递给对话框组件
      this.$refs.dialog.setFormData(row);
      // 2-显示对话框组件
      this.info.isShow=true;
    },
    // 自定义事件处理函数
    goodsUpdateHandle() {
      // 请求商品总数
      this.getGoodsTotalAction();
      // 请求商品列表
      this.getGoodsListAction({ page: this.page, size: this.size });
    },
    // switch开关组件change事件处理函数
    attrChange(row) {
      const fd = new FormData();
      fd.append("isnew", row.isnew);
      fd.append("ishot", row.ishot);
      fd.append("id", row.id);
      this.$axios.post("/goodsedit", fd).then((res) => {
        if (res.code === 200) {
          this.$message.success(res.msg);
        }
      });
    },
    // 分页按钮点击事件处理函数
    pageChange(page) {
      // 1-更新分页页码
      this.page = page;
      // 2-根据最新的分页请求商品列表
      this.getGoodsListAction({ page: this.page, size: this.size });
    },
    // 监听每页显示数据条数的变化
    sizeChange(size) {
      // 1-更新每页显示数据条数
      this.size = size;
      // 2-根据最新的size请求商品数据
      this.getGoodsListAction({ page: this.page, size: this.size });
    },
  },
  created() {
    this.goodsUpdateHandle();
  },
};
</script>

<style>
</style>